<template>
    <div class="splash" v-show="SplashComponent.Default.IsLoading">
        <span>{{ SplashComponent.Default.Tip.value }}</span>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import SplashComponent from './SplashComponent';

onMounted(() => SplashComponent.Default.InitializeAsync());
</script>

<style scoped>
.splash {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    backdrop-filter: blur(3rem);
}

.splash>span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    font-size: 4.8rem;

    color: white;
}
</style>